import React from 'react';
import {
  StyleSheet,
  TextInput,
  View,
  TouchableWithoutFeedback,
} from 'react-native';
import PropTypes from 'prop-types';
import { sizes, colors } from 'bee/themes';
import { px2dp } from 'bee/utils/px2dp';
import { alpha } from 'bee/utils/color';
import { Icon, Names } from 'bee/components/Icon';
import noop from 'bee/utils/noop';

import { HotLabel, Label, NormalLabel, RedLabel } from './Label';
import TriangleType from './Triangle';
import Circle from './Circle';
import Banner from './Banner';
import Icons from './Icons';
import ProductItem from './ProductItem';

const SearchInput = ({ value, placeholder, ...props }) => (
  <TextInput
    value={value}
    placeholder={placeholder}
    placeholderTextColor={colors[1103]}
    underlineColorAndroid="transparent"
    style={styles.searchInput}
    {...props}
  />
);

SearchInput.propTypes = {
  value: PropTypes.string,
  placeholder: PropTypes.string,
};

SearchInput.defaultProps = {
  value: '',
  placeholder: '',
};

// let SearchBarBgcColor;

const SearchBar = ({ value, placeholder, onPress, bgc, ...props }) => (
  <TouchableWithoutFeedback onPress={onPress}>
    <View style={[styles.searchBar, { backgroundColor: alpha(bgc, 0.2) }]}>
      <View style={{ marginHorizontal: px2dp(20) }}>
        <Icon name={Names.sousuo} size={sizes.f3} color={colors['1103']} />
      </View>
      <SearchInput value={value} placeholder={placeholder} {...props} />
    </View>
  </TouchableWithoutFeedback>
);

SearchBar.propTypes = {
  value: PropTypes.string,
  placeholder: PropTypes.string,
  onPress: PropTypes.func,
  bgc: PropTypes.string,
};

SearchBar.defaultProps = {
  value: '',
  placeholder: '',
  bgc: colors.white,
  onPress: noop,
};

const styles = StyleSheet.create({
  searchBar: {
    flexDirection: 'row',
    height: px2dp(56),
    // backgroundColor: alpha(SearchBarBgcColor, 0.2),
    borderRadius: px2dp(28),
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  searchIcon: {
    marginLeft: px2dp(20),
    fontFamily: 'iconfont',
    fontSize: px2dp(36),
    marginRight: px2dp(21),
    // 以下临时
    width: px2dp(36),
    height: px2dp(36),
    backgroundColor: '#efa',
  },
  searchInput: {
    padding: 0,
    flex: 1,
    fontSize: sizes.f0,
  },
});

export {
  SearchBar,
  HotLabel,
  Label,
  NormalLabel,
  RedLabel,
  TriangleType,
  Circle,
  Banner,
  Icons,
  ProductItem,
};
